<template>
    <!-- pages/workdetails/index.wxml -->
    <view class="pages">
        <view class="imgbox" v-if="detailObj.type == 1">
            <view class="page-section page-section-spacing swiper">
                <swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" @change="bindchange">
                    <block v-for="(item, index) in detailObj.imgs" :key="index">
                        <swiper-item>
                            <image class="img" mode="aspectFill" :src="item.path" :data-index="index" :data-item="item.path" @tap.stop.prevent="previewImg"></image>
                        </swiper-item>
                    </block>
                </swiper>
                <view class="imgindex">{{ swiperCurrent }}/{{ detailObj.imgs.length }}</view>
            </view>
        </view>
        <view class="comments">
            <view class="flexbox">
                <view>
                    <image class="herderimg mr-30" :src="detailObj.headportrait"></image>
                </view>
                <view class="w-100">
                    <view class="flexbox-sb centers w-100">
                        <view class="centers">
                            <view class="name mr-10">{{ detailObj.nickname }}</view>
                            <view class="work">{{ detailObj.position }}</view>
                        </view>
                        <view class="time">{{ detailObj.createdate }}</view>
                    </view>
                    <view class="workdetails mt-10">从业6年</view>
                </view>
            </view>
            <view class="mt-20">
                <view class="tit mt-10">#各种流行发型设计</view>
                <view class="time mt-10">{{ detailObj.describe }}</view>
            </view>
            <!-- <view class="mt-40">
      <view wx:for="{{commentlist}}" wx:key="index" wx:if="{{index < 3}}">
        <view class="hrs mb-10"></view>
        <view class="flexbox-sb centers">
          <text class="comtext2">{{item.name}}</text>
          <text class="comtext1">{{item.time}}</text>
        </view>
        <view class="comtext1">{{item.title}}</view>
      </view>
    </view>
    <view class="all">
      <view class="centers" bindtap="onAll">
        <text class="alltext">全部评价</text>
        <image class="icon-40" src="{{imgUrl + 'right1.png'}}"></image>
      </view>
    </view> -->
        </view>
        <view class="centers box">
            <view class="xian"></view>
            <view class="title">TA的其他作品</view>
            <view class="xian"></view>
        </view>
        <view class="exhibitionbox">
            <view class="exhibition" v-if="exhiblist.length > 0" @tap="onDetail" :data-item="item" v-for="(item, index) in exhiblist" :key="index">
                <view>
                    <image class="exhibitionimg1" mode="aspectFill" :src="item.cover"></image>
                </view>

                <view>
                    <!-- <text>#蛋糕卷</text> -->
                </view>

                <view>
                    <text>{{ item.descibe }}</text>
                </view>

                <view>
                    <view class="centers">
                        <image class="exhibitionimg2" :src="item.headportrait"></image>
                        <text>{{ item.nickname }}</text>
                    </view>
                    <view class="centers">
                        <image
                            :data-opusId="item.opusId"
                            :data-isCollection="item.isCollection"
                            @tap.stop.prevent="onLove"
                            class="loveicon"
                            :src="item.isCollection ? imgUrl + 'love.png' : imgUrl + 'hollow.png'"
                        ></image>
                        <text v-if="item.isAdd">{{ item.collection + 1 }}</text>
                        <text v-if="!item.isAdd">{{ item.collection }}</text>
                    </view>
                </view>
            </view>
            <view class="w-100">
                <van-empty v-if="exhiblist.length == 0 || exhiblist == null" description="暂无作品" />
            </view>
        </view>
        <view class="btnbox">
            <view class="flexbox-center">
                <view
                    class="flexbox-center mr-40"
                    :data-opusId="detailObj.opusId"
                    :data-isCollection="detailObj.isCollection"
                    :data-collection="detailObj.collection"
                    @tap.stop.prevent="onLoveone"
                >
                    <view class="icon-36">
                        <image class="icon-36" :src="detailObj.isCollection ? imgUrl + 'love.png' : imgUrl + 'hollow.png'"></image>
                    </view>
                    <view class="w-100">{{ detailObj.collection > 9999 ? detailObj.newcollection + 'w' : detailObj.collection }}</view>
                </view>
                <view @tap.stop.prevent="sharefun">
                    <button class="flexbox-center share" open-type="share" :data-opusId="detailObj.opusId">
                        <view>
                            <image class="icon-36" :src="imgUrl + 'share1.png'"></image>
                        </view>
                        <view class="w-100">{{ detailObj.reposted || 0 }}</view>
                    </button>
                </view>
            </view>
            <view class="btn1 mr-20" @tap="goHome">返回首页</view>
            <!-- <view class="btn" data-item="{{hairObj}}" bindtap="toHairstylistdetails">
      立即预约
    </view> -->
        </view>
    </view>
    <!-- <van-popup show="{{ show }}" position="bottom" custom-style="height: 820rpx;" custom-class='custom-class'
  bind:close="onClose" round>
  <view class="flexbox-sb">
    <text>全部评论（34）</text>
    <image catchtap="onClose" class="icon-40" src="{{imgUrl + 'close.png'}}">
    </image>
  </view>
  <view class="mt-40">
    <view wx:for="{{commentlist}}" wx:key="index">
      <view class="flexbox-sb centers">
        <text class="comtext2">{{item.name}}</text>
        <text class="comtext1">{{item.time}}</text>
      </view>
      <view class="comtext1">{{item.title}}</view>
      <view class="hrs mtb-10"></view>
    </view>
  </view>
</van-popup>
<tabbar activeIdx="1"></tabbar> -->
</template>

<script>
// pages/workdetails/index.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js'); // 引入require

export default {
    data() {
        return {
            indicatorDots: false,
            vertical: false,
            autoplay: false,
            interval: 2000,
            duration: 500,
            detailObj: null,
            list: [],
            show: false,
            swiperCurrent: 1,
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            exhiblist: [],
            lastId: '',
            bool: '',
            hairObj: null,
            invitecode: '',
            nums: 0
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        if (options.invitecode) {
            uni.setStorageSync('code', options.invitecode);
        }

        this.getDynamicStateDetail(options.id);
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // 获取邀请码
        _request
            .get('/recomUser/findReCode', {
                userId: uni.getStorageSync('userid')
            })
            .then((res) => {
                this.setData({
                    invitecode: res.data.data.invitecode
                });
            })
            .catch((error) => {
                console.log(error, 'error');
            });
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function (res) {
        console.log('转发');
        let userid = uni.getStorageSync('userid');
        const { detailObj } = this; // 设置菜单中的转发按钮触发转发事件时的转发内容

        if (res.from === 'button') {
            // 来自页面内转发按钮
            console.log(res, 'res');
        }

        let title = detailObj.nickname + '美发师发了一条超赞的动态,快点来看！';
        return {
            title: title,
            // 默认是小程序的名称 path: "/pages/Home/Index/Index?id=" + lastId + "&type=" + type + "&is_share=1&index=0&template=2"
            path: 'pages/workdetails/index?id=' + detailObj.opusId + '&type=' + detailObj.type + '&is_share=1&index=0&template=2' + '&invitecode=' + this.invitecode,
            success: function (res) {
                console.log('成功', res);
            }
        };
    },
    methods: {
        //点击评论图片进行预览，长按保存分享图片
        previewImg(e) {
            let list = this.detailObj.imgs.map((item) => {
                return item.path;
            });
            uni.previewImage({
                current: e.currentTarget.dataset.item,
                // 当前显示图片的http链接
                urls: list // 需要预览的图片http链接列表
            });
        },

        // 轮播事件
        bindchange(e) {
            const { current } = e.detail;
            this.setData({
                swiperCurrent: current + 1
            });
        },

        // 查看作品详情
        onDetail(e) {
            const { item } = e.currentTarget.dataset; // let obj = JSON.stringify(item)

            uni.navigateTo({
                url: '/pages/workdetails/index?id=' + item.opusId
            });
        },

        // 点击展示弹窗
        onAll() {
            this.setData({
                show: true
            });
        },

        // 点击关闭弹窗
        onClose() {
            this.setData({
                show: false
            });
        },

        // 美发师收藏
        // onLoveHair(e) {
        //   const {
        //     stylistid
        //   } = e.currentTarget.dataset
        //   console.log(e, 'e');
        //   _request.postObj('/index/stylistCollection', {
        //     userId: wx.getStorageSync('userid'),
        //     stylistId: stylistid,
        //     type: this.data.bool ? '0' : '1'
        //   }).then((res) => {
        //     this.getstylistCard(stylistid)
        //     wx.showToast({
        //       title: this.data.bool ? '收藏成功' : '取消收藏',
        //       icon: 'none',
        //       duration: 2000
        //     })
        //   }).catch((error) => {
        //     console.log(error, 'error');
        //   })
        // },
        sharefun() {
            _request
                .get('/opusRank/updateOpusCount', {
                    userId: uni.getStorageSync('userid'),
                    opusId: this.detailObj.opusId
                })
                .then((res) => {
                    if (res.data.code == 200) {
                        this.setData({
                            ['detailObj.reposted']: res.data.data || 0
                        });
                    }
                });
        },

        // 美发师获取作品
        getScreenDynamicState() {
            let data = {
                featureId: 0,
                hairstyleId: 0,
                lastId: 0,
                stylistId: this.detailObj.stylistId,
                userId: uni.getStorageSync('userid')
            };

            _request
                .postObj('/dynamicState/getScreenDynamicState', { ...data })
                .then((res) => {
                    if (res.data.data.length > 0 && res.data.data != undefined) {
                        this.setData({
                            exhiblist: res.data.data.filter((item) => {
                                return item.opusId != this.detailObj.opusId;
                            }),
                            lastId: res.data.data[res.data.data.length - 1].opusId
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 点击收藏
        onLove(e) {
            const { opusid, iscollection } = e.currentTarget.dataset;

            _request
                .postObj('/storeStylist/oupsCollection', {
                    opusId: opusid,
                    userId: uni.getStorageSync('userid'),
                    type: iscollection ? 0 : 1
                })
                .then((res) => {
                    this.setData({
                        exhiblist: this.exhiblist.map((item) => {
                            if (item.opusId === opusid) {
                                return { ...item, isCollection: !iscollection, isAdd: !iscollection };
                            }

                            return item;
                        })
                    });
                    uni.showToast({
                        title: iscollection ? '取消收藏' : '收藏成功',
                        icon: 'none',
                        duration: 2000
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 详情收藏
        onLoveone(e) {
            const { opusid, iscollection, collection } = e.currentTarget.dataset;

            _request
                .postObj('/storeStylist/oupsCollection', {
                    opusId: opusid,
                    userId: uni.getStorageSync('userid'),
                    type: iscollection ? 0 : 1
                })
                .then((res) => {
                    let num = iscollection ? collection - 1 : collection + 1;
                    this.setData({
                        detailObj: { ...this.detailObj, isCollection: !iscollection, collection: num }
                    });
                    uni.showToast({
                        title: iscollection ? '取消收藏' : '收藏成功',
                        icon: 'none',
                        duration: 2000
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 发型师详情
        getstylistCard(id) {
            _request
                .postObj('/storeStylist/card', {
                    stylistId: id,
                    userId: uni.getStorageSync('userid'),
                    nexus: 1,
                    storeId: uni.getStorageSync('storeId')
                })
                .then((res) => {
                    res.data.data.newcollectionNumer = res.data.data.collectionNumer / 10000;
                    this.setData({
                        hairObj: res.data.data,
                        bool: res.data.data.isCollection
                    });
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 前往发型师详情
        toHairstylistdetails(e) {
            const { item } = e.currentTarget.dataset;
            let obj = JSON.stringify(item);
            uni.navigateTo({
                url: '/pages/hairstylistdetails/index?hair=' + encodeURIComponent(obj)
            });
        },

        // 获取美发师作品详情
        getDynamicStateDetail(id) {
            _request
                .postObj('/dynamicState/getDynamicStateDetail', {
                    opusId: id,
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    res.data.data.newcollection = res.data.data.collection / 10000;
                    this.setData(
                        {
                            detailObj: res.data.data
                        },
                        () => {
                            this.getstylistCard(this.detailObj.stylistId);
                        }
                    ); // getnum()
                    // 发型师作品

                    this.getScreenDynamicState();
                });
        },

        // 回到首页
        goHome() {
            uni.switchTab({
                url: '/firstpages/home/index'
            });
        }
    }
};
</script>
<style>
/* pages/workdetails/index.wxss */
.pages {
    padding-bottom: 150rpx;
}

/* 轮播 */
.imgbox {
    width: 750rpx;
    height: 560rpx;
    background: #fbfbfb;
    position: relative;
}

.page-section,
.img,
swiper {
    width: 750rpx;
    height: 560rpx;
}

.imgindex {
    position: absolute;
    color: white;
    z-index: 10;
    right: 60rpx;
    bottom: 120rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
}

/* 评论 */
.comments {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 10px 10px 0px 0px;
    padding: 30rpx 20rpx 30rpx 20rpx;
    box-sizing: border-box;
    margin: 20rpx;
    height: 340rpx;
    box-sizing: border-box;
}

.ml-20 {
    margin-left: 20rpx;
}

.flexbox {
    display: flex;
    flex-wrap: nowrap;
    margin-left: 10rpx;
}

.herderimg {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
}

.name {
    height: 56rpx;
    font-size: 30rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 56rpx;
    max-width: 250rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.work {
    width: 80rpx;
    height: 32rpx;
    background: #ff8722;
    border-radius: 0px 4px 4px 4px;
    font-size: 20rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 32rpx;
    text-align: center;
}

.workdetails {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 34rpx;
    text-align: left;
}

.tit {
    height: 44rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 44rpx;
}

.time {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    line-height: 34rpx;
}

.describe {
    height: 28rpx;
    font-size: 20rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 28rpx;
}

.comtext2 {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}

.comtext1 {
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    margin: 6rpx 0 20rpx 0;
}

.all {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40rpx;
}

.alltext {
    height: 40rpx;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ff8722;
    line-height: 40rpx;
}

/* 弹窗 */
.custom-class {
    padding: 30rpx 40rpx;
    box-sizing: border-box;
}

.title {
    font-size: 36rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 50rpx;
    margin: 0 20rpx;
}

.box {
    width: 710rpx;
    justify-content: center;
    margin: 20rpx;
    text-align: center;
}

.xian {
    width: 60rpx;
    height: 2rpx;
    background: #bebebe;
}

/* 展示区 */
.exhibitionbox {
    display: flex;
    flex-wrap: wrap;
    margin: 20rpx 20rpx;
    justify-content: space-between;
}

.exhibition {
    width: 340rpx;
    height: 500rpx;
    background-color: white;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    margin-bottom: 40rpx;
}

/* .exhibition>view:nth-child(2) {
  height: 34rpx;
  font-size: 24rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 34rpx;
  margin: 10rpx 0;
  margin-left: 10rpx;
} */

.exhibition > view:nth-child(3) {
    height: 68rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    margin-bottom: 22rpx;
    margin-left: 10rpx;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    /* 这里是超出几行省略 */
    overflow: hidden;
}

.exhibition > view:nth-child(4),
.exhibition > view:nth-child(4) > view:nth-child(1) {
    height: 60rpx;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    line-height: 60rpx;
    text-align: center;
}

.exhibition > view:nth-child(4) {
    justify-content: space-between;
    margin-right: 10rpx;
    margin-left: 10rpx;
}

.exhibition > view:nth-child(4) > view:nth-child(1) > text {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
    margin-left: 20rpx;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    /* 这里是超出几行省略 */
    overflow: hidden;
}

.exhibition > view:nth-child(4) > view:nth-child(2) > text {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 34rpx;
    margin-left: 10rpx;
}

.exhibitionimg1 {
    height: 320rpx;
    width: 340rpx;
}

.exhibitionimg2 {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    display: inline-table;
}

.loveicon {
    width: 28rpx;
    height: 28rpx;
}

/* 底部 */

.btnbox {
    width: 750rpx;
    height: 110rpx;
    background: #ffffff;
    box-shadow: 2px 3px 4px 4px rgba(223, 223, 223, 0.5);
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0 40rpx;
    box-sizing: border-box;
}

.btn {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    width: 180rpx;
    height: 68rpx;
    background: #ff8722;
    box-shadow: 0px 2px 4px 0px rgba(255, 128, 0, 0.26);
    border-radius: 34rpx;
    text-align: center;
    line-height: 68rpx;
}

.btn1 {
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    width: 180rpx;
    height: 68rpx;
    border: 1px solid #ff8722;
    box-shadow: 0px 2px 4px 0px rgba(255, 128, 0, 0.26);
    border-radius: 34rpx;
    text-align: center;
    line-height: 68rpx;
}

.flexbox-center {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
}

button {
    font: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    line-height: unset !important;
    text-align: inherit !important;
    width: unset !important;
    color: inherit !important;
    position: initial !important;
    box-sizing: inherit !important;
    border: unset !important;
    min-height: unset !important;
    display: block !important;
}

button::after {
    display: none;
}

.w-100 {
    width: 100%;
    text-align: center;
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
}
</style>
